<script setup>
import { ref } from 'vue'
const currentPage1 = ref(1)
const currentPage2 = ref(1)
const currentPage3 = ref(1)
const currentPage4 = ref(1)
const currentPage5 = ref(1)
</script>

<template>
  <div>
    <h1 class="row-title">
      总页数total大于页面最大显示数page-count，此时无法全部显示
    </h1>
    <div class="row">
      <lee-pager
        :current-page="currentPage1"
        :total="50"
        @page-change="page => (currentPage1 = page)"
      />
    </div>
    <h1 class="row-title">
      总页数total小于/等于页面最大显示数page-count，此时全部显示
    </h1>
    <div class="row">
      <lee-pager
        :current-page="currentPage2"
        :total="10"
        @page-change="page => (currentPage2 = page)"
      />
    </div>
    <h1 class="row-title">调整页面最大显示数</h1>
    <div class="row">
      <lee-pager
        :pager-count="15"
        :current-page="currentPage3"
        :total="13"
        @page-change="page => (currentPage3 = page)"
      />
    </div>
    <h1 class="row-title">调整主题</h1>
    <div class="row">
      <lee-pager
        type="warning"
        :current-page="currentPage4"
        :total="20"
        @page-change="page => (currentPage4 = page)"
      />
    </div>
    <div class="row">
      <lee-pager
        type="danger"
        :current-page="currentPage4"
        :total="20"
        @page-change="page => (currentPage4 = page)"
      />
    </div>
    <h1 class="row-title">调整大小</h1>
    <div class="row">
      <div class="row">
        <lee-pager
          size="large"
          type="danger"
          :current-page="currentPage5"
          :total="20"
          @page-change="page => (currentPage5 = page)"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.row {
  width: 1000px;
}
</style>
